<template>
	<view  class="page_body">
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">搜索</text>
		</navBar>
		<!-- 搜索栏 -->
		<view style="background-color: #FFF;">
			<search 
				:isLinks = 'false'
				@searchBlur='searchBlur'
				bgColor="#F5F5F5"
				@updateInput="updateInput"
				@nativeInput="nativeInput"
				>
			</search>
		</view>
		
		<view 
		:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
		class="main_search">
			
			<view class="main_search_lisijil pd10">
				<view class="main_search_lisijil_title mb10">
					历史搜索
				</view>
				<view class="main_search_lisijil_list">
					
					<template v-if="lsssList.length">
						<text
						@click="clickLsItem(item)"
						 v-for="item in lsssList"
						 class="main_search_lisijil_Item">
							{{item}}
						</text>
					</template>
					<template v-else>
						<text class="tip" >暂无历史搜索记录哦~~</text>
					</template>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		computed:{
			...mapGetters(['demoTopHieght'])
		},
		data() {
			return {
				timer:null,
				navTimer: null,
				lsssList:[],
				productSearch:''
			};
		},
		onShow() {
			this.$nextTick(() => {
				//获取高度
				this.Utils.getDemoTopHeight('main_search')
				
				//获取历史记录数据
				this.lsssList =[...new Set( uni.getStorageSync('lsss') ? JSON.parse(uni.getStorageSync('lsss')) : [])],
				console.log(this.lsssList)
			})
		},
		// onHide() {
		// 	this.$store.commit('updateSearch','')
		// },
		methods:{
			//返回
			navToBack(){
				uni.navigateBack()
			},
			updateInput(e) {
				 console.log(e,'表情');
				this.productSearch = e;
			},
			nativeInput(e) {
				 console.log(e,'表情');
				// if(e.length > 0){
				// 		 let regex = /^[\u4e00-\u9fa5a-zA-Z0-9\s]+$/
				// 		if (!regex.test(e)) {
				// 		this.Utils.toast(`不允许输入特殊字符`)
				// 		return
				//  }
				// }
				if(e == '' ) return
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.$store.commit('updateSearch',e)
					uni.navigateTo({
						url:`/page_public/publicClass?title=搜索&page=seach&search=${e}`
					})
				}, 1500)
			
			},
			//输入框失去焦点
			searchBlur(val){
				this.$store.commit('updateSearch',val)
				// if (this.navTimer !== null) clearTimeout(this.navTimer)
				// this.navTimer = setTimeout(() => {
					uni.navigateTo({
						url:`/page_public/publicClass?title=搜索&page=seach&search=${val}`
					})
				// }, 1000)
				
			},
			//点击历史记录
			clickLsItem(item){
				this.searchBlur(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.nav_item {
		  padding-left: 6rpx
	}
	.main_search{
		width: 100%;
		box-sizing: border-box;
		background-color: #FFF;
		
		.main_search_lisijil{
			
			.main_search_lisijil_title{
				font-size: $font_size_18;
				color: $text_color_333;
				font-weight: bold;
			}
			.main_search_lisijil_list{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				.main_search_lisijil_Item{
					font-size: $font_size_12;
					color: $text_color_808080;
					background-color: #f2f2f2;
					border-radius: 60rpx;
					padding: 10rpx 30rpx;
					margin: 20rpx 20rpx 0 0;
				}
				
				.tip{
					font-size: 24rpx;
					color: #808080;
					margin: 100rpx auto;
				}
			}
			
		}
	}
</style>
